<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .mi-box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }

        .circle {
            border-radius: 50%;
        }

        .tran {
            animation: bb 3s linear infinite;

        }

        @keyframes bb {
            0%{
                background: red;

            }
            50%{
                background: yellow;
                transform: translateY(150%);
            }
            100%{
                background: red;
            }
        }

    </style>
</head>
<body>
<div id="app">

    <div v-bind:class="[mi,ce]"></div>

</div>

<script>
    var v = new Vue({
        el: '#app',
        data: {},
        computed: {
            mi: function () {
                return "mi-box tran"
            },
            ce: function () {
                return 'circle'
            }
        }
    })


</script>

</body>
</html>